<template>
  <div class="ant-tabs-tabpane ant-tabs-tabpane-active">
    <div   v-if="total > 0" class="el-row is-justify-center is-align-middle">
      <div class="el-col el-col-24">
        <div class="el-row" style="background:#F5F5F5;" type="flex">
          <div class="el-col el-col-4" style="padding:10px;"><span
              class="wallet-list-item">购买时间</span></div>
          <div class="el-col el-col-6" style="padding:10px;"><span
              class="wallet-list-item">课程标题</span></div>
          <div class="el-col el-col-5" style="padding:10px;"><span
              class="wallet-list-item">订单号</span></div>
          <div class="el-col el-col-2" style="padding:10px;"><span
              class="wallet-list-item">购买价格</span></div>
          <div class="el-col el-col-5" style="padding:10px;"><span
              class="wallet-list-item">交易方式</span></div>
          <div class="el-col el-col-2" style="padding:10px;"><span
              class="wallet-list-item">操作</span></div>
        </div>
        <div class="el-row" style="border-bottom:1px #eeeeee dashed;"
             v-for="(item,index) in userRecords" :key="index">
          <div class="el-col el-col-4" style="padding:10px;">
            <span class="wallet-list-item">{{formatTimeToStr(item.updateTime)}}</span>
          </div>
          <div class="el-col el-col-6" style="padding:10px;">
            <nuxt-link :to="'/note/detail/'+item.opid" :title="item.title"><span  class="wallet-list-item">{{item.title}}</span></nuxt-link>
          </div>
          <div class="el-col el-col-5" style="padding:10px;">
            <span class="wallet-list-item">
              {{item.tradeno}}
            </span>
          </div>
          <div class="el-col el-col-2" style="padding:10px;">
            <span class="wallet-list-item">￥{{item.price}}</span>
          </div>
          <div class="el-col el-col-5" style="padding:10px;"><span
              class="wallet-list-item">{{item.payMethodName}}<span v-if="item.code">({{item.code}})</span></span>
          </div>
          <div class="el-col el-col-2" style="padding:10px;">
            <nuxt-link :to="'/note/detail/'+item.opid" :title="item.title"> <n-button>点击学习</n-button></nuxt-link>
          </div>
        </div>
      </div>
    </div>
    <div class="py-[60px] flex justify-center" style="width: 100%" v-if="total==0">
      <k-empty :show="total==0" url="/note" btnmsg="点击前往学习课程"></k-empty>
    </div>
    <div style="padding-top:30px;padding-bottom:10px;text-align: center" v-if="total > 0">
      <a href="javascript:void(0);" @click="handleLoadPage"  v-if="pages > pageNo">点击加载更多</a>
      <a href="javascript:void(0);" class="c999"  v-else>没有更多了</a>
    </div>
  </div>
</template>
<script setup>
// 充值用户充值记录
const userRecords = ref([])
const total = ref(0)
const pageNo = ref(1)
const pageSize = ref(10)
const pages = ref(1)
const channelId = ref("1,2,3")
// 加载用户充值记录
const handleRecordsData = async () => {
  const resp = await useFindMyNoteOrderPageApi({channelIds:channelId.value,pageNo:pageNo.value,pageSize:pageSize.value})
  userRecords.value = userRecords.value.concat(resp.data.records)
  total.value = resp.data.total
  pages.value = resp.data.pages
}

const handleLoadPage = () => {
  if(pages.value == pageNo.value){
    return
  }
  pageNo.value++
  handleRecordsData()
}

onMounted(()=>{
  handleRecordsData()
})
</script>
<style scoped>
.el-col{display: flex;justify-content: center;align-content: center;flex-direction: column}
</style>